<template>
  <div :class="$style.root">
    <el-form :inline="true" :model="formQuery" label-position="right">
      <el-row>
        <el-col :span="6">
          <el-form-item label="顶级渠道" :label-width="labelWidth">
            <el-select clearable v-model="formQuery.topChannelCode" placeholder="请选择" style="width: 90%" filterable @change="topChannelChange">
              <el-option v-for="item in topChannelList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="门店编码" :label-width="labelWidth">
            <el-input v-model="formQuery.storeCode" placeholder="请输入" style="width: 90%" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市" :label-width="labelWidth">
            <el-cascader
              v-model="formQuery.city"
              :options="cityList"
              :show-all-levels="false"
              placeholder="请选择城市"
              clearable
              filterable
              style="width: 90%"
              :props="{ checkStrictly: true }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="片区" :label-width="labelWidth">
            <el-select clearable v-model="formQuery.districtCode" placeholder="请选择" style="width: 90%" filterable>
              <el-option v-for="item in areaList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="所属蜂窝" :label-width="labelWidth">
            <el-select clearable v-model="formQuery.cellularCode" placeholder="请选择" style="width: 90%" filterable>
              <el-option v-for="item in cellulars" :key="item.cellularCode" :label="item.cellularName" :value="item.cellularCode" />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="门店类型" :label-width="labelWidth">
            <el-select clearable v-model="formQuery.storeType" placeholder="请选择" style="width: 90%" filterable>
              <el-option label="重点门店" value="KEY_STORES" />
              <el-option label="非重点门店" value="NON_KEY_STORES" />
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="6">
          <el-form-item label="店型" :label-width="labelWidth">
            <el-select clearable v-model="formQuery.storeLevel" placeholder="请选择" style="width: 90%" filterable>
              <el-option label="A" value="A" />
              <el-option label="B" value="B" />
              <el-option label="C" value="C" />
              <el-option label="D" value="D" />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="优先级" :label-width="labelWidth">
            <el-input v-model="formQuery.storePriority" placeholder="请输入" style="width: 90%" clearable />
          </el-form-item>
        </el-col> -->
        <el-col :span="6">
          <el-form-item label=" " :label-width="labelWidth">
            <el-button @click="onQuery" type="primary" :loading="querying">查询</el-button>
            <el-button @click="reset" type="info">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<style lang="scss" module>
@import './index.module.scss';
</style>

<script>
import Index from './index';
export default Index;
</script>
